<template>
 <div class="pwdDialog">
  <!-- 修改用户的对话框 -->
  <el-dialog title="修改密码" v-model="this.updatePwdDialogVisible" width="50%" @close="editDialogClosed"
  :close-on-click-modal='false'>
    <!-- 内容主体区 -->
    <el-form 
    :model="editPwdForm"  
    :rules="rules"
    ref="editPwdForm" 
    status-icon
    label-width="70px">
      <el-form-item label="原密码" prop="oldpwd">
        <el-input show-password v-model="editPwdForm.oldpwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newpwd">
        <el-input show-password v-model="editPwdForm.newpwd"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="this.updatepwdDialog">取 消</el-button>
      <el-button type="success" @click="updatePwd()">确 定</el-button>
    </span>
  </el-dialog>
 </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import api from '@/api/user_index.js';
 export default {
  name: '' ,
 data () {
 return {
    editPwdForm: {
      oldpwd:'',
      newpwd:''
    },
    rules:{
      oldpwd: [{ required: true, message:'请输入密码', trigger: "blur" }],
      newpwd: [{ required: true, message:'请输入新密码', trigger: "blur" }],
    }
  }
 },
 computed:{
  ...mapState('moduleDialog',['updatePwdDialogVisible']),
 },
 methods:{
  ...mapMutations('moduleDialog',['updatepwdDialog']),
  editDialogClosed(){
    this.$refs.editPwdForm.resetFields();
    // this.updatepwdDialog()
  },
  updatePwd() {
    console.log('ok')
    api.updatePwd(this.editPwdForm.oldpwd,this.editPwdForm.newpwd).then((res) => {
      // console.log(res)
      if(res.code == 200){
        this.$alert('请重新登录！','密码修改成功',{
          confirmButtonText: '确定',
          callback: () => {
           this.$router.push('/')
          }
        })
      }else{
        this.$alert('请重新输入！', res.message ,{
          confirmButtonText: '确定',
        })
      }
    }).catch(error => {
      console.log(error)
    })
  }
 }
}

</script>
<style scope lang="less">
.dialog-footer{
  display: flex;
  justify-content: space-evenly;
}
.el-dialog__headerbtn .el-dialog__close{
  color: #333;
}
.el-button--primary{
  background-color: #67C23A;
}
</style>